<template>
  <div class="box_yj" ref="parent">
    <span></span>
    <div class="section-header">活动关注主体占比</div>
    <div ref="charts" :style="chartsDom" v-show="jz"></div>
             <animae-jz   :style="chartsDom" v-if="!jz"></animae-jz>
  </div>
</template>
<script>
import { eventFocus } from '@/api/data';
export default {
	props: ['height', 'dateProp'],
	data() {
		return {
			chartsDom: null,
			jz:true,
			chartsData: [
				{ value: 0, name: '市场主体' },
				{ value: 0, name: '重点群体' },
				{ value: 0, name: '大学生' }
			]
		};
	},
	computed: {
		setStyle: {
			get() {
				return this.$refs.parent.offsetWidth;
			},
			set(val) {
				this.chartsDom = {
					width: val - 30 + 'px',
					height: this.height - 30 - 31 + 'px',
					'z-index': 100,
					position: 'relative'
					// 'background-color': 'red'
				};
			}
		}
	},
	mounted() {
		this.setStyle = this.setStyle;
		this.$nextTick(_ => {
			this.init();
		});
	},
	methods: {
		init() {
			console.log(this.dateProp)
			this.jz=false
			eventFocus(this.dateProp).then(({ data: { data } }) => {
				this.jz=true
				if (data && data.length > 0) {
					this.chartsData = data;
				}else{
					
				}
				this.chartInit();
			});
			// return this.chartInit();
		},
		chartInit() {
			let option = {
			     tooltip: {
			         trigger: 'item',
			         formatter: '{a} <br/>{b} : {c} ({d}%)'
			     },
			//      legend: {
								// orient: 'vertical',
								// right:'50%',
								// data: dataa.map(v=>v.name),
								// textStyle: {
								// 	color: '#8ebafb',
								// 	fontSize: 8
			//      }},
			     tooltip:{
			       trigger:'item'
			     },
				   legend: {
				         orient: 'vertical',
				         left: 'right',
				         data: ['企业', '求职者','大学生'],
						 textStyle: {
						 	color: '#ffffff',
						 	fontSize: 12
						 }
				     },
			     series: [
			         {
			             name: '活动关注主体占比',
			             type: 'pie',
			             radius:'50%',
			             label: {
			                 show: false,
			             },
			             center: ['50%', '60%'],
							    label: {
							                  formatter: ' {b|{b}}\n{per|{d}%}  ',
							                  rich: {
							                      b: {
							                          fontSize: 12,
							                          lineHeight: 12
							                      },
							                      per: {
							                          color: '#fff',
							                      }
							                  }
							              },
			             data: this.chartsData,
			             emphasis: {
			                 itemStyle: {
			                     shadowBlur: 10,
			                     shadowOffsetX: 0,
			                     shadowColor: 'rgba(0, 0, 0, 0.5)'
			                 },
			             //     label: {
			             //         show: true,
			             //         fontSize: '10',
			             //         fontWeight: 'bold'
			             //     },
			             //     labelLine: {
			             //     show: true
			             // },
			             },
			             
			             color: ['#fb7293','#9fe6b8','#FFEC8B'],
			         }
			     ]
			 }
			let chartsInit = this.$echarts.init(this.$refs.charts);
			chartsInit.setOption(option);
			
		}
	}
};
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
</style>